<template>
    <div class="main">
        <div class="top">
            <ul class="title">
                <li
                        :class="{active: current === item.personId}"
                        v-for='(item,index) in user'
                        :key='index'
                        @click='activePerson(item.personId,item.personName)'>
                    <a href="#">{{item.name}}</a>
                </li>

            </ul>
            <!--
                            <div class="load">
                                <a href="javascript:;">刷新</a>
                            </div> -->
        </div>

        <!-- <div class='reply-search-wrap'>
            <input type="text" placeholder="请输入关键字" v-model="searchValue" @keyup.enter='searchWrap(searchValue)'>
            <span class='search' @click='searchWrap(searchValue)'></span>
        </div> -->


        <div class="rightQuick">
            <div class="mainBOXQuickWrap" v-show='visible'>
                <div class="left">

                    <ul>
                        <li
                                v-for='(tag,index) in dynamicTags'
                                @click='handleClick(index,tag.id)'
                                :key="index"
                                :class='{active:index === currentInputId}'
                        >
                            {{tag.replys_group}}
                        </li>
                    </ul>

                </div>
                <div class="right">
                    <ul>
                        <li v-for='(TagContent,index) in content' @click='hasContent(TagContent.content)' :key='index'>
                            {{TagContent.content}}
                        </li>
                    </ul>
                </div>
            </div>

            <div class="search" v-show='!visible'>
                <p v-show='NotFoundShow'>{{NotFound}} </p>
                <ul>
                    <li v-for='(item,index) in dataContentList' :key='index' @click='hasContent(item)'>
                        {{item}}
                    </li>
                </ul>
            </div>


        </div>


        <div class="quickyBOX">
            <p @click='bus'>设置快捷回复内容</p>
        </div>

        <settingQuick :dynamicTags="dynamicTags"></settingQuick>
    </div>
</template>

<script>
import bus from "../bus";
import chat from "../../libs/chat";
import quickyContent from "../../libs/quickyContent";
import settingQuick from "./settingQuick"; //设置快捷回复
import contentQ from "../contentQ";

export default {
  name: "quicky",

  data() {
    return {
      user: [
        {
          name: "个人",
          personId: 1,
          personName: "private"
        },
        {
          name: "公共",
          personId: 2,
          personName: "public"
        }
      ],
      DefaultName: "private", //默认显示个人的分组名和内容
      dynamicTags: [],
      content: "",
      currentInputId: "",
      currentGroup: "",
      searchValue: "",
      current: 1,
      visible: true, //搜索面板的隐藏
      dataContent: "", //搜索的内容
      dataContentList: [], //得到的搜索结果
      NotFound: "未搜索到相应内容，换个关键词试试~",
      NotFoundShow: false
    };
  },
  methods: {
    searchWrap(searchValue) {
      let _self = this;
      this.visible = false;

      this.dataContentList = [];

      for (let i = 0; i < this.dataContent.length; i++) {
        if (this.dataContent[i].content.indexOf(searchValue) > -1) {
          console.log(this.dataContent[i].content);
          this.dataContentList.push(this.dataContent[i].content);
        }
      }
      // console.log(_self.NotFoundShow);
    },

    hasContent(content) {
      this.visible = true;
      this.searchValue = "";
      contentQ.$emit("content", content);
    },
    activePerson(personId, personName) {
      this.current = personId;
      this.DefaultName = personName;
      this.currentInputId = '';
      this.defaultExhibition(personName);
    },
    bus() {
      bus.$emit("modalshow");
    },
    //快捷回复展示
    defaultExhibition(DefaultName) {
      let _self = this;
      let box = [];
      let defaultName = DefaultName || _self.DefaultName; //默认显示值 || 或显示
      let newUserId = 0;

      if (defaultName === "private") {
        newUserId = chat.my().userId;
      }
      quickyContent.Exhibition(newUserId, function(res) {
        // console.log(res);
        if (res.code === 200 && res.data[defaultName]) {
          let dataGroup = res.data[defaultName].group; //得到的分组名
          let dataContent = res.data[defaultName].content; //得到分组名下的内容
          // console.log(res);
          _self.content = [];
          for (let i = 0; i < dataGroup.length; i++) {
            let group = {
              id: dataGroup[i].id,
              replys_group: dataGroup[i].replys_group,
              content: []
            };
            for (let j = 0; j < dataContent.length; j++) {
              if (dataGroup[i].id === dataContent[j].group_id){
                group.content.push({
                  id: dataContent[j].id,
                  content: dataContent[j].content
                });
              }
            }
            box.push(group);
            _self.dataContent = dataContent;
          }
          _self.dynamicTags = box;
          //  console.log( _self.dynamicTags);
        } else {
          _self.$message({
            title: "快捷回复",
            message: res.error,
            type: "error"
          });
        }
      });
    },

    handleClick(index, id) {
      this.currentInputId = index; //下标
      this.currentGroup = id; //
      this.content = this.dynamicTags[index].content;
    }
  },

  components: {
    settingQuick
  },

  mounted() {
    //设置高度为自适应
    var height = $(window).height();
    $(".rightQuick").css("height", height - 222);
    $(window).resize(() => {
      height = $(window).height();
      $(".rightQuick").css("height", height - 222);
    });

    // chat.addValidateListener(json => {
    //   this.defaultExhibition();

      // contentQ.$on('upDataGroup',(data) => {
      //      this.defaultExhibition();
      // });
      // contentQ.$on('upDataContent',(data) => {
      //      this.defaultExhibition();   
      // });

    //});

    // if (this.searchValue.length === 0) {
    //     this.visible = true;
    // }
  }
};
</script>


<style scoped>
ul {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #333;
}

li {
  list-style-type: none;
}

.top {
  position: relative;
}

.mainBOXQuickWrap {
  height: 100%;
  display: flex;
}

.search p {
  margin: 1rem 0;
  color: #aaa;
}

.top .load {
  position: absolute;
  right: -0.1rem;
  top: 0;
}

.title {
  margin: 1rem 0;
  display: flex;
  padding: 0;
  width: 100%;
}

.title li {
  width: 50%;
}

.title a {
  width: 50%;
  display: inline-block;
  padding: 0.5rem 3rem;
  font-size: 12px;
  text-align: center;
}

.active {
  color: #fff;
  background: #62bad9;
}

.active a {
  color: #fff;
}

.load {
  text-align: right;
  padding: 0.5rem 2rem;
}

.load a {
  font-size: 0.67rem;
  padding-left: 1rem;
  color: #aab4b5;
  background: url(https://static.sobot.com/chat/admins/img/reload-598c08fba3.png) -6%
    center no-repeat;
}

.rightQuick {
  width: 100%;
  border-top: 1px solid #e6e7ef;
}

.rightQuick ulQuick {
  display: flex;
  height: 100%;
}

.search {
  height: 100%;
}

.rightQuick .left {
  width: 38.7%;
  height: 100%;
  border-right: 1px solid #e6e7ef;
  overflow: visible;
}

.rightQuick .right {
  width: 60%;
  height: 100%;
  overflow: visible;
}

.rightQuick ul {
  height: 100%;
  overflow-y: auto;
}
.rightQuick ul::-webkit-scrollbar {
  width: 2px;
  display: none;
}

.rightQuick ul::-webkit-scrollbar-track-piece {
  background-color: #fff;
} /* 滚动条的内层滑轨背景颜色 */

.rightQuick ul::-webkit-scrollbar-track {
  background-color: #fff;
} /* 滚动条的外层滑轨背景颜色 */

.rightQuick ul::-webkit-scrollbar-thumb {
  background-color: #d4d8e2;
} /* 滚动条的内层滑块颜色 */

.rightQuick ul::-webkit-scrollbar-button {
  background-color: #fff;
  display: none;
} /* 滑轨两头的监听按钮颜色 */

.rightQuick ul li {
  font-size: 12px;
  text-align: left;
  padding: 0.7rem;
  cursor: pointer;
}

.rightQuick .left ul .active {
  border-left: 2px solid #62bad9;
}

.quickyBOX {
  height: 2.5rem;
  line-height: 2.5rem;
  background: #f3f7f9;
  /* width: 10rem; */
  margin: 0 auto;
}

.quickyBOX p {
  font-size: 0.79rem;
  cursor: pointer;
}

.reply-search-wrap {
  padding: 0.3rem;
  margin: 1rem;
  position: relative;
  border: 1px solid #e6e7ee;
}

.reply-search-wrap input {
  width: 100%;
  border: none;
  outline: none;
}

.reply-search-wrap .search {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(https://static.sobot.com/chat/admins/img/search-82bfcf9fae.png)
    center center no-repeat;
  right: 0.8rem;
  position: absolute;
  top: 0.4rem;
}
</style>
